<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="baidu-site-verification" content="sXwUJJQNC7" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="description" content="管理属于你自己的私人云书库。在线管理，阅读，下载到本地，分享，寻找城市书窝，读书视频，阅读数据等功能等待您的使用" />
    <title>阅乎 - 书的世界</title>
    <link rel="icon" href="../../resource/img/Starry.jpg" type="image/x-icon"/>
    <link href="resource/css/default.css" rel="stylesheet" type="text/css" />
    <!--必要样式-->
    <link href="resource/css/styles.css" rel="stylesheet" type="text/css" />
    <link href="resource/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="resource/css/loaders.css" rel="stylesheet" type="text/css" />

</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style rel="stylesheet">
    .hidden {
        display:none;
    }
</style>
<body>
<div class='login'>
    <div class='login_title'>
        <span>阅乎，不止于阅</span>
    </div>
    <div id="loginAction" class='login_fields ' >
        <div class='login_fields__user'>
            <div class='icon'>
                <img alt="" src='resource/img/user_icon_copy.png'>
            </div>
            <input name="login" placeholder='用户名/手机号/邮箱' maxlength="16" type='text' autocomplete="off" value=""/>
            <div class='validation'>
                <img alt="" src='resource/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='resource/img/lock_icon_copy.png'>
            </div>
            <input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off">
            <div class='validation'>
                <img alt="" src='resource/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='resource/img/key.png'>
            </div>
            <input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
            <div class='validation' style="opacity: 1; right: -5px;top: -3px;">
                <canvas class="J_codeimg" id="myCanvas" onclick="Code();">1对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
            </div>
        </div>
        <div class='login_fields__submit'>
            <input type='button' id="loginYG" value='登录'>
        </div>
    </div>
    <!-- 注册功能 -->
    <div id="signAction" class='login_fields  hidden'>
        <div class='login_fields__user'>
            <div class='icon'>
                <img alt="" src='resource/img/user_icon_copy.png'>
            </div>
            <input name="login" id="signName" placeholder='设置用户名' maxlength="16" type='text' autocomplete="off" value=""/>
            <div class='validation'>
                <img alt="" src='resource/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='resource/img/lock_icon_copy.png'>
            </div>
            <input name="pwd" id="signPwd" placeholder='设置密码(字母,数字,下划线)' maxlength="16" type='text' autocomplete="off">
            <div class='validation'>
                <img alt="" src='resource/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='resource/img/lock_icon_sure.png'>
            </div>
            <input name="pwd" id="surePwd" placeholder='确认密码' maxlength="16" type='text' autocomplete="off">
            <div class='validation'>
                <img alt="" src='resource/img/tick.png'>
            </div>
        </div>
        <!-- <div class='login_fields__password'>
          <div class='icon'>
            <img alt="" src='resource/img/key.png'>
          </div>
          <input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
          <div class='validation' style="opacity: 1; right: -5px;top: -3px;">
          <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
          </div>
        </div> -->
        <div class='login_fields__submit'>
            <input type='button' id="signYG" value='注册'>
        </div>
    </div>
    <!-- 注册功能 -->
    <div class='success'>
    </div>
    <div id="sign_suggest" class='disclaimer'>
        <p style="font-size:14px">没有账户？<span onclick="changeMode('sign')" style="color:#1e9fff;">注册</span></p>
    </div>
    <div id="login_suggest" class='disclaimer hidden'>
        <p style="font-size:14px">已有账户？<span onclick="changeMode('login')" style="color:#1e9fff;">登录</span></p>
    </div>
</div>
<div class='authent'>
    <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <p>认证中...</p>
</div>
<div class="OverWindows"></div>

<script type="text/javascript" src="resource/js/jquery-ui.min.js"></script>
<script type="text/javascript" src='resource/js/stopExecutionOnTimeout.js?t=1'></script>
<script src="layui/layui.js" type="text/javascript"></script>
<script src="resource/js/Particleground.js" type="text/javascript"></script>
<script src="resource/js/Treatment.js" type="text/javascript"></script>
<script src="resource/js/jquery.mockjax.js" type="text/javascript"></script>
<script src="js/cookie_util.js" type="text/javascript"></script>
<script type="text/javascript">
    var ip = '';
    $.ajax({
        url: 'http://freegeoip.net/json/',
        success: function(data){
            ip = data.ip;
            /* console.log(data.ip); */
        },
        type: 'GET',
        dataType: 'JSON'
    });
    //粒子背景特效
    $('body').particleground({
        dotColor: '#E8DFE8',
        lineColor: '#133b88'
    });
    $('input[name="pwd"]').focus(function () {
        $(this).attr('type', 'password');
    });
    $('input[type="text"]').focus(function () {
        $(this).prev().animate({ 'opacity': '1' }, 200);
    });
    $('input[type="text"],input[type="password"]').blur(function () {
        $(this).prev().animate({ 'opacity': '.5' }, 200);
    });
    $('input[name="login"],input[name="pwd"]').keyup(function () {
        var Len = $(this).val().length;
        if (!$(this).val() == '' && Len >= 5) {
            $(this).next().animate({
                'opacity': '1',
                'right': '30'
            }, 200);
        } else {
            $(this).next().animate({
                'opacity': '0',
                'right': '20'
            }, 200);
        }
    });

    var canGetCookie = 0;//是否支持存储Cookie 0 不支持 1 支持
    //默认账号密码

    var truelogin = "ptnews";
    var truepwd = "111111";

    var CodeVal = 0;
    Code();
    function Code() {
        if(canGetCookie == 1){
            createCode("AdminCode");
            var AdminCode = getCookieValue("AdminCode");
            showCheck(AdminCode);
        }else{
            showCheck(createCode(""));
        }
    }
    function showCheck(a) {
        CodeVal = a;
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.clearRect(0, 0, 1000, 1000);
        ctx.font = "80px 'Hiragino Sans GB'";
        ctx.fillStyle = "#E8DFE8";
        ctx.fillText(a, 0, 100);
    }

    $(document).keypress(function (e) {
        // 回车键事件
        if (e.which == 13) {
            $('#loginYG').click();
        }
    });

    //界面模式
    function changeMode(status) {
        if(status=='login'){//登录
            $("#signAction").addClass("hidden");
            $("#loginAction").removeClass("hidden");
            $("#login_suggest").addClass("hidden");
            $("#sign_suggest").removeClass("hidden");
        }else if(status=='sign'){//注册
            $("#loginAction").addClass("hidden");
            $("#signAction").removeClass("hidden");
            $("#sign_suggest").addClass("hidden");
            $("#login_suggest").removeClass("hidden");
        }

    }

    function trueAlert(msg,icon){
        layui.use('layer', function () {
            var layer= layui.layer;
            var index = layer.alert(msg, { icon: icon, time: 1000, offset: '150px', closeBtn: 0, title: '友情提示', btn: [], anim: 2, shade: 0 });
            layer.style(index, {
                color: '#777'
            });

        });
    }

    function testPwd(str){
        var reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
        if(reg.test(str)){
            /*  符合规则   */
            return true;
        }else{
            /* 存在非法字符   */
            return false;
        }
    }
    var open = 0;
    layui.use('layer', function () {
        /* var msgalert = '默认账号:' + truelogin + '<br/> 默认密码:' + truepwd;
        var index = layer.alert(msgalert, { icon: 6, time: 4000, offset: 't', closeBtn: 0, title: '友情提示', btn: [], anim: 2, shade: 0 });
        layer.style(index, {
            color: '#777'
        });  */
        //注册验证
        $('#signYG').click(function () {
            var sign = $('#signName').val();
            var signPwd = $('#signPwd').val();
            var sureSign = $('#surePwd').val();

            if (sign == '') {
                ErroAlert('请设置你的账户名');
            } else if (sign.length < 5 || sign.length > 10) {
                ErroAlert('你的账户名'+(sign.length > 10 ? '过长':'太短'));
            } else if (signPwd == '') {
                ErroAlert('请设置你的密码');
            } else if (signPwd.length < 6 || signPwd.length > 10) {
                ErroAlert('请设置6-10位的密码');
            } else if(!testPwd(signPwd)){
                ErroAlert('密码由数字、字母、下划线组成且不能以下划线开头或结尾');
            } else if (sureSign == '') {
                ErroAlert('请确认密码');
            } else if (sureSign != signPwd) {
                ErroAlert('前后密码不一致');
            } else{
                //注册
                var JsonData = {"phoneNo":sign,"pwd":signPwd};
                $.ajax({
                    type: "post",
                    url: "register",
                    data: JsonData,
                    dataType: 'json',
                    async: 'false',
                    success:function(data){
                        console.log(data);
                        if(data.code == 201){
                            ErroAlert('该用户名已经被注册');
                        }else if(data.code == 200){
                            trueAlert("注册成功,请登录...",1);
                            $('input[name="login"]').val(sign);
                            changeMode('login');
                        }
                    },
                    error: function () {
                        alert("请求失败");
                    }
                });
            }
        });
        //非空验证
        $('#loginYG').click(function () {
            var login = $('input[name="login"]').val();
            var pwd = $('input[name="pwd"]').val();
            var code = $('input[name="code"]').val();

            if (login == '') {
                ErroAlert('请输入您的账号');
            } else if (pwd == '') {
                ErroAlert('请输入密码');
            } else if (code == '' || code.length != 4) {
                ErroAlert('输入验证码');
            } else {

                //登陆
                var JsonData = { login: login, pwd: pwd, code: code ,ip: ip};
                if(JsonData.code.toUpperCase() != CodeVal.toUpperCase()){
                    myAlert("验证码错误");
                    return;
                }
                //认证中..
                //fullscreen();
                $('.login').addClass('test'); //倾斜特效
                setTimeout(function () {
                    $('.login').addClass('testtwo'); //平移特效
                }, 300);
                setTimeout(function () {
                    $('.authent').show().animate({ right: -320 }, {
                        easing: 'easeOutQuint',
                        duration: 600,
                        queue: false
                    });
                    $('.authent').animate({ opacity: 1 }, {
                        duration: 200,
                        queue: false
                    }).addClass('visible');
                }, 500);
                //此处做为ajax内部判断
                console.log(JsonData);

                var url = "login";
                console.log(truelogin);
                console.log(truepwd);
                console.log(truelogin);
                $.ajax({
                    type: "post",
                    url: url,
                    data: JsonData,
                    dataType: 'json',
                    async: 'false',

                    error: function () { alert("请求失败"); },
                    success:function(data){
                        //ajax返回
                        //认证完成
                        setTimeout(function () {
                            $('.authent').show().animate({ right: 90 }, {
                                easing: 'easeOutQuint',
                                duration: 600,
                                queue: false
                            });
                            $('.authent').animate({ opacity: 0 }, {
                                duration: 200,
                                queue: false
                            }).addClass('visible');
                            $('.login').removeClass('testtwo'); //平移特效
                        }, 2000);
                        setTimeout(function () {
                            $('.authent').hide();
                            $('.login').removeClass('test');
                            if (data.code == '200') {
                                //登录成功
                                $('.login div').fadeOut(100);
                                $('.success').fadeIn(1000);
                                $('.success').html(data.Text);
                                //跳转操作

                                addCookie("userId",data.data.id,2);
                                window.location.href="book/index.html";
                            } else {
                                myAlert(data.msg);
                            }
                        }, 2400);
                    }
                });

            }
        })
    })
    //全屏--设置
    var fullscreen = function () {
        elem = document.body;
        if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.requestFullScreen) {
            elem.requestFullscreen();
        } else {
            //浏览器不支持全屏API或已被禁用
        }
    }
    var myAlert  = function(msg){
        var index = layer.alert(msg, { icon: 6, time: 1000, offset: 't', closeBtn: 0, title: '友情提示', btn: [], anim: 2, shade: 0 });
        layer.style(index, {
            color: '#777'
        });
    }
</script>
</body>
</html>
